<template>
	<div class="login">
		<van-nav-bar title="京东登录" left-text="返回" left-arrow @click-left="$router.push('/home')" />

		<van-form @submit="onSubmit">
			<van-cell-group inset>
				<van-field v-model="loginname" name="loginname" label="用户名" placeholder="用户名"
					:rules="[{ required: true, message: '请填写用户名' }]" />
				<van-field v-model="password" type="password" name="password" label="密码" placeholder="密码"
					:rules="[{ required: true, message: '请填写密码' }]" />
			</van-cell-group>
			<div style="margin: 16px;">
				<van-button round block type="primary" native-type="submit"
					color="linear-gradient(to right, #ff6034, #ee0a24)">
					登录
				</van-button>
			</div>
		</van-form>

		<div class="bottom">
			<div class="bottom-con">
				去注册
			</div>
			<van-cell title="快速注册" is-link to="/register/step1" />
		</div>
	</div>
</template>

<script setup lang='ts'>
import { ref, type Ref } from 'vue';

// 登录
import { loginapi } from '@/api/loginapi'

import { useRouter } from 'vue-router';

import { Dialog } from 'vant';

// 引入userStore ，此u该userId
import {useUserStore} from '@/store/userStore'
// userStore 就是获取到的store 仓库实例对象，相当于vuex中 this.$stort
const userStore = useUserStore()
console.log('u',userStore);


const loginname: Ref<string> = ref('');
const password: Ref<string> = ref('');

const router = useRouter()


const onSubmit = (values: { loginname: string, password: string }) => {
	loginapi(values).then((res: any) => {
		console.log(res);
		if (res.code == 200) {
			userStore.setUserId(res.data?.userid)
			setTimeout(()=>{
				router.push('/home')
				loginname.value=''
				password.value=''
			},2000)
		} else if (res.code == 10010) {
			console.log(res.message);
		
		}

	})
};

const log = () => {
	Dialog.confirm({
		message:
			'该用户不存在',
		confirmButtonText: '立即注册'
	}).then(() => {		// 确认
		// on confirm
		router.push('/register/step1')

	}).catch(() => {	// 取消
		console.log("aaa");

		// on cancel
	});
}
</script>

<style scoped>

.login {
	width: 100%;
	height: 100%;
	background-color: rgb(244, 244, 244);
}
.van-form{
	margin-top: 26px;
}
.bottom-con{
	width: 82%;
	margin: 20px auto 6px;
	line-height: 20px;
	font-size: 14px;
	font-weight: 100;
}
.van-cell{
	width: 92%;
	margin: 0 auto;
	border-radius: 8px;
}
</style>